iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 12

[Day 12] Sass/SCSS 實作練習

  • 分享至 

  • xImage
  •  

前言

不管是學習 CSS 或是 Sass,在認識完基本的使用方式之後,都會透過作品的實作練習,才會更加熟悉運作,前面幾天可以看到從小區塊的 CSS 練習,到一整頁的網頁練習。同樣在 Sass 也到 Udemy 找個實作網頁來練習。
這次的課程專案也相對複雜,在設定變數、mixin、function等等,用比較多進階的方式,如果沒有上過課程一開始真的也不會想到可以這樣設定,或是簡化。在此專案,除了學會 Sass 的基本語法以及檔案命名與配置之外,在基本的版面排版方式,主要使用 grid,藉此也還能在練習下 grid 的撰寫方式。

udemy課程: SASS - The Complete SASS Course (CSS Preprocessor)

課程重點整理:

1.scss 檔案的建立

會建立的不同分檔,個別負責不同的區塊,並透過@import放入主要的sass檔

  • main.scss 引入其他分檔
  • abstracts 資料夾
    • /_variables.scss:設定常用的變數,如:顏色、字體大小
    • /_mixin.scss:設定某些區段中,重複用到的樣式,並於該區段要使用的時候引用
  • base 資料夾
    • /_base.scss:為設定大框架,如html、body、container,等主幹的大小、字型的設定
  • components 資料夾:放置部分功能元件
    • /_button.scss:按鈕的設定
    • /_heading.scss:標題
  • layout (設計網頁版面配置(Layout))
    • /_header.scss
    • /_navigation.scss
    • /_footer.scss
  • pages 資料夾 :通常是用來放置其他分頁(網頁內會連結到其他相關分頁)
  • venders 資料夾 : 放置外部套件

2. class 命名

    <nav class="first-nav">
        <ul class="first-nav-list">
          <li class="first-nav-item">
            <a href="#" class="first-nav-link">
              <i class="fa fa-search"></i>
              search
            </a>
          </li>
          <li class="first-nav-item">
            <a href="#" class="first-nav-link">
              Contact Us
            </a>
          </li>
         </ul>
    </nav>
  • 在Sass的撰寫下可以用連接符號撰寫名稱,並使用巢狀結構,更顯得簡潔、清楚
.first-nav{
   &-list{  
   
    height: 100%;
    }
  &-item{
    list-style: none;
  }
  &-link{
    color: color(primary);
   
  }
}

3. 使用@each,製作輪播效果

透過@each,可以將原本重複撰寫的語法,化繁為簡,帶入設定好的項目、時間,透過迴圈方式編譯完成。

  • 設置延遲時間(4秒),使每張圖片呈現(先為css的撰寫方式)
    • :nth-child()選擇第幾張圖片
/*設置延遲時間,讓每張slide呈現4秒替換*/
 .slideshow-slide:nth-child(1){
   animation-delay: 0s;
 }
 .slideshow-slide:nth-child(2){
   animation-delay: 4s;
 }
 .slideshow-slide:nth-child(3){
   animation-delay: 8s;
 }
 .slideshow-slide:nth-child(4){
   animation-delay: 12s;
 }
 .slideshow-slide:nth-child(5){
   animation-delay: 16s;
 }
  • 將上方轉化為@each的寫法
    • 先創造一個自定義列表$animlist,在each迴圈時要傳進去的項目
    • 在each迴圈中.slideshow-slide:nth-child放入slide of number(取得列表中第一個值),後面接著寫下要執行的動作animation-delay: nth($item,2);
///改寫為=>$animlist:第幾個 延遲秒數,
//#{nth($item,1)}: 帶入變數,1表示(2 4s),第一個值=2
$animList:1 0s,2 4s,3 8s,4 12s, 5 16s;
@each $item in $animList {
   .slideshow-slide:nth-child(#{nth($item,1)}){
     animation-delay: nth($item,2);
   }
}

參考資料:
Sass - @each
Sass Tutorials #9 - Nth Function In Lists

此課程比較完整細節可以到我的 部落格 看看喔~


上一篇
[Day 11] Sass/SCSS 基本介紹
下一篇
[Day 13] SCSS 結合 Bootstrap 網頁製作
系列文
邊工作邊進行前端學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言